<template>
  <el-container style="margin:-20px;height:100%">
    <el-aside width="200px">
      <el-menu
        style="height:100%"
        :default-active="activeIndex"
        mode="vertical"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ff0"
        @select="changeMenu"
        :default-openeds="openMenu"
        router
      >
        <template v-for="item in menu">
          <el-menu-item :index="item.path" :key="item.path" v-if="!item.submenu">
            <i :class="item.icon" style="color:#fff"></i>
            {{item.text}}
          </el-menu-item>
          <el-submenu :key="item.path" :index="item.path" v-else>
            <template v-slot:title>
              <i :class="item.icon" style="color:#fff"></i>
              {{item.text}}
            </template>
            <el-menu-item
              :key="sub.path"
              :index="item.path+sub.path"
              v-for="sub in item.submenu"
            >{{sub.text}}</el-menu-item>
          </el-submenu>
        </template>
      </el-menu>
    </el-aside>
    <el-main>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>活动管理</el-breadcrumb-item>
        <el-breadcrumb-item>活动列表</el-breadcrumb-item>
        <el-breadcrumb-item>活动详情</el-breadcrumb-item>
      </el-breadcrumb>
      <div style="padding:15px 0;">
        <router-view />
      </div>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      activeIndex: "/home",
      openMenu: [],
      menu: [
        {
          text: "首页",
          path: "/home",
          icon: "el-icon-s-home",
        },
        {
          text: "用户管理",
          path: "/user",
          icon: "el-icon-user-solid",
          submenu: [
            {
              text: "添加用户",
              path: "/add",
            },
            {
              text: "用户列表",
              path: "/list",
            },
          ],
        },
        {
          text: "商品管理",
          path: "/goods",
          icon: "el-icon-grape",
           submenu: [
            {
              text: "添加商品",
              path: "/add",
            },
            {
              text: "商品列表",
              path: "/list",
            },
          ],
        },
        {
          text: "订单管理",
          path: "/order",
          icon: "el-icon-s-order",
        },
      ],
      currentIndex: 0,
    };
  },
  methods: {
    goto(path) {
      this.$router.push(path);
    },
    back() {
      this.$router.back();
    },
    changeMenu(path) {
      this.activeIndex = path;
    },
  },
  components: {},
};
</script>

<style lang="scss">
html {
  height: 100%;
}
body {
  margin: 0;
  height: 100%;
}
.header {
  line-height: 60px;
  color: #fff;
  background-color: rgba(84, 92, 100, 0.9);
  .logo {
    font-size: 24px;
    color: #fc0;
    i {
      font-size: 40px;
      vertical-align: middle;
      margin-right: 5px;
    }
  }
}
.is-active {
  i {
    color: inherit !important;
  }
}
</style>
